<template>
  <div>
    <el-main>
      已读消息{{sum}}
      <ul>
        <li
          v-for="item in $store.state.shoplist"
          :key="item.id"
          v-show="item.status==1"
        >
        <span class="sp">{{item.title}}</span>
        <el-button type="primary" class="btn" @click="btn(item.id)">标记已读</el-button>
        <el-button type="danger" class="btn" @click="remove(item.id)">删除</el-button>
        </li>
        <el-button type="primary" @click="bu">全部</el-button>
      </ul>
    </el-main>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {
  btn(id){
    this.$store.commit("btn",id);
  },
  bu(){
    this.$store.commit("bu");
  },
  remove(id){
    this.$store.commit("remove",id);
  },
},
computed:{
  sum(){
    let res =this.$store.state.shoplist.filter((item)=>{
      return item.status==1;
    });
    return res.length;
  },
},
};
</script>
<style lang="scss" scoped>
  ul{
    position: relative;
    li{
      line-height: 39.6px;
      height: 39.6px;
      margin: 15px 0px;
      .sp{
        position: absolute;
        left: 100px;
      }
    }
  }
  .btn{
    position: relative;
    right: -500px;
  }
</style>